<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="登录" />
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <!-- 输入框 -->
      <van-field
        v-model="info.mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      />
      <!-- 输入框 -->
      <van-field
        v-model="info.code"
        label="验证码"
        placeholder="请输入验证码"
        :rules="rules.code"
      />
      <div style="margin: 16px">
        <van-button
          :loading="isLoading"
          loading-text="登录中..."
          round
          block
          type="info"
          native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 导入封装的登录接口函数
// 如果就写文件夹名字，会默认找里面的package.json、index.js、index.vue
import { loginAPI } from '@/api'

export default {
  name: 'hmLogin',

  data() {
    return {
      // 控制加载状态，默认为false，代表默认不加载
      isLoading: false,
      info: {
        mobile: '13911111111',
        code: '246810'
      },

      rules: {
        // 规则是一个数组，代表可以放多条规则
        // 一个规则是一个对象
        mobile: [
          // required: true
          { required: true, message: '请填写手机号' },
          // 还要验证输入的内容是手机号，所以这里要写正则
          { pattern: /^1[2-9]\d{9}$/, message: '请输入正确的手机号' }
        ],
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '请输入6位数字验证码' }
        ]
      }
    }
  },

  methods: {
    /*
      submit：是表单提交会调用的事件
      就是当你点击了提交按钮，并且整个表单通过了验证，才会进行提交，也就意味着才会调用这个函数
    */
    async onSubmit() {
      // 把加载状态改成true
      this.isLoading = true

      // 当这个方法被调用，就证明输入的绝对符合规则，可以发请求
      try {
        let res = await loginAPI(this.info)

        // 把服务器返回的token和refresh_token存到vuex里
        this.$store.commit('changeTokenObj', res.data.data)
        this.$toast.success('登录成功')
        // 就把用户信息清空，也就是传入一个空对象给它赋值
        this.$store.commit('changeUserInfo', {})

        // 判断有没用参数，有参数就打回到参数对应的页面
        if (this.$route.query.back) {
          this.$router.push(this.$route.query.back)
        } else {
          // 否则跳转到首页
          this.$router.push('/layout/home')
        }
      } catch {
        // 本接口特点是：如果账号密码错误，会抛出异常（会报错）
        this.$toast.fail('登录失败')
      }

      // 把加载状态改成false
      this.isLoading = false
    }
  }
}
</script>

<style></style>
